<template>
    <div class="title" @click="onclick">
        <span class="arrow" :class="{extended:extended,folded:!extended}">
            <svg viewBox="0 0 1024 1024" width="14" height="14"><path d="M765.7 486.8L314.9 134.7c-5.3-4.1-12.9-0.4-12.9 6.3v77.3c0 4.9 2.3 9.6 6.1 12.6l360 281.1-360 281.1c-3.9 3-6.1 7.7-6.1 12.6V883c0 6.7 7.7 10.4 12.9 6.3l450.8-352.1c16.4-12.8 16.4-37.6 0-50.4z"></path></svg>
        </span>
        <div>{{title}}<slot name="title"></slot></div>
    </div>
    <div class="content grow" :class="{extended:extended}">
        <slot></slot>
    </div>
</template>

<style sloped>
.title {
    margin-top: 10px;
    display: flex;
    cursor:pointer;
    flex-direction: row;
    align-items: center;
}
.arrow {
    width:18px;
    height:18px;
    text-align: center;
    margin-right: 4px;
}

.arrow.extended {
    transform: rotate(90deg);
    transition: transform .15s cubic-bezier(0.4, 0, 0.2, 1);
}
.arrow.folded {
    transform: rotate(0deg);
    transition: transform .15s cubic-bezier(0.4, 0, 0.2, 1);
}

.content {
    padding: 0px ;
    overflow-y: auto;
    height: 0px;
    max-height: 0px;
    opacity: 0;
    margin-top: 0 !important;
    margin-bottom: 0 !important;

    transition: 
        max-height 0.3s cubic-bezier(0.4, 0, 0.2, 1),
        opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1),
        margin-top 0.3s cubic-bezier(0.4, 0, 0.2, 1),
        margin-bottom 0.3s cubic-bezier(0.4, 0, 0.2, 1),
        padding-top 0.3s cubic-bezier(0.4, 0, 0.2, 1)
        padding-bottom 0.3s cubic-bezier(0.4, 0, 0.2, 1)
}
.content.extended {
    padding: 5px ;
    max-height: 1000px;
    opacity: 1;
}

</style>

<script setup lang="ts">
import { ref } from 'vue'

const extended = ref(false)

const props = defineProps<{
    title?: string
}>()

function onclick() {
    extended.value = !extended.value
}
</script>